<template>
	<view class="big" >
		<view class="header-modular" v-if="now">
			<image src="../../static/icon/搜索1.svg" style="height: 20px;width: 20px;margin-bottom: 3px;" @click="selectLocation"></image>
			<image src="../../static/icon/搜索1.svg" style="height: 20px;width: 20px;margin-bottom: 3px;" @click="test"></image>
					<view class="title2">{{ City }} {{ County }}
					<image src="../../static/icon/定位2.svg" style="height: 22px;width: 22px;margin-bottom: 3px;;"@click="getLocation"></image></view>
				<view class="title3">{{ now.temp }}°C</view>
				<view class="title2">{{now.text}}</view>
				<view class="title4">{{ tempMin }}~{{tempMax}}℃</view>	
				<view v-if="warn">
					<view @click="warning" style="margin: 5px;width: 90px;padding: 5px 10px;background-color: white;border-radius: 15px;margin-left: 90px;">
						<view style="font-weight: bolder;color: black;font-size: 12px;display: flex;justify-content: center;align-items: center;" >
						<image src="../../static/icon/预警.svg" style="height: 15px;width: 15px;"> </image>
						{{warn.typeName}}{{warn.level}}预警
						</view>
				</view>	
				</view>
			<view style="display: flex;justify-content: space-between;margin-top: 30px;">
				<view class="title1" style="opacity: 0.8;flex: 1;">{{ now.windDir }} {{ now.windScale }}级</view>
				<view class="title1" style="opacity: 0.8;flex: 1;">湿度 {{ now.humidity }}%</view>
				<view class="title1"style=" opacity: 0.8;flex: 1;">气压 {{ now.pressure }}hpa</view>		
			</view>		
		</view>
		<view>
			 <uni-notice-bar @click="getMore" show-icon scrollable background-color="#7B68EE" :text="notices[0].time+ '   :    '+notices[0].content"> 
				 
				 </uni-notice-bar>
		 </view>
		<!-- 24小时预报 -->
		<view class="card-modular" v-if="hourly">
			<view style="display: flex;">
			<view class="title">24小时预报</view>
			<image src="../../static/icon/天气-13.svg" style="width: 20px;height: 20px;margin-left: 5px;"></image>
			</view>
			<view class="card-wrap" style="background-color: #F5F5F5;opacity: 0.9;">
				<block v-for="(item, index) in hourly" :key="index" >
					<view class="item hourly">
						<view class="text-gray" style="margin-bottom: -20px;font-size: 13px;">{{ item.time }}</view>
						<image class="icon" :src="`/static/icons/${item.icon}.svg`"></image>
						<view class="text-primary" style="margin-top: -20px;">{{ item.temp }}°C</view>
						<view style="margin-top: 5px;">{{ item.windDir }}</view>
						<view class="text-gray">{{ item.windScale }}级</view>
					</view>
				</block>
			</view>
			
		</view>
		<!-- 7天预报 -->
		
		<view class="card-modular" v-if="daily">
			<view style="display: flex;">
			<view class="title">多日预报</view>
			<image src="../../static/icon/天气-13.svg" style="width: 20px;height: 20px;margin-left: 5px;"></image>
			</view>
			<view class="card-wrap" style="background-color:#F5F5F5;opacity: 0.9;">		
			
				<block v-for="(item, index) in daily" :key="index" >			
					<view class="item daily">
						<view>{{ item.dateToString }}</view>
						<view class="text-gray"style="margin-bottom: -20px;font-size: 13px;">{{ item.date }}</view>
						<image class="icon" :src="`/static/icons/${item.iconDay}.svg`"></image>
						<view class="text-primary"style="margin-top: -20px;">{{ item.tempMin }}°~{{ item.tempMax }}°C</view>
							
						<view style="margin-top: 5px;">{{ item.textDay }}</view>
						
					</view>
				</block>
			</view>
		</view>
		<!-- 空气质量 -->
		<view class="card-modular">
			<view class="title">空气质量</view>
			<button  class="card-wrap"  @click="air" style="background-color:#F5F5F5;font-size: 16px;opacity: 0.9;display: flex;align-items: center;">
			
			<image style="height: 35px;width: 35px;" src="../../static/icon/空气质量.svg"></image>
				<view style="display: flex;align-items: center;margin-left: 5px;">{{indexes.category}}</view>
				<view style="display: flex;align-items: center;margin-left: 10px;">当前{{indexes.name}}指数为{{indexes.aqiDisplay}}</view>
			<image src="../../static/icon/前往.svg" style="width: 20px;height: 20px;margin-left: 15px;"></image>
			
			
			
			</button>
		</view>
		
		
		<!-- 天气指数 -->
		<view class="card-modular" v-if="daily">
			<view style="display: flex;">
			<view class="title">天气指数</view>
		<image src="../../static/icon/天气指数.svg" style="width: 20px;height: 20px;margin-left: 5px;"></image>
			</view>
			<view class="card-wrap" style="background-color:#F5F5F5;opacity: 0.9;">
				<button @click="life">查看详情 =></button>
			<view class="nav-bar-item" style="display: flex;">
					<view class="grid-item-box" style="flex:0.4;">
						<image mode="widthFix" style="width: 23px;height: 23px;margin-top: 2px;" src="../../static/icon/体感温度.svg"></image>
						<view style="margin-top: 5px;color:#4B0082;">{{now.feelsLike}}℃</view>
						<text class="p1" style="font-size: 11px;">体感温度</text>
					</view>
				<view class="grid-item-box" style="flex:0.45;">
						<image mode="widthFix" style="width: 23px;height: 23px;margin-top: 2px;" src="../../static/icon/湿度.svg"></image>
						<view style="margin-top: 5px;color:#4B0082;">{{now.humidity}}%</view>
						<text class="p1" style="font-size: 11px;">湿度</text>
					</view>
					<view class="grid-item-box" style="flex:0.45;">
						<image mode="widthFix" style="width: 23px;height: 23px;margin-top: 2px;" src="../../static/icon/云量.svg"></image>
						<view style="margin-top: 5px;color:#4B0082;">{{now.cloud}}%</view>
						<text class="p1" style="font-size: 11px;">云量</text>
					</view>
					<view class="grid-item-box" style="flex:0.45;">
						<image mode="widthFix" style="width: 23px;height: 23px;margin-top: 2px;" src="../../static/icon/紫外线.svg"></image>
						<view style="margin-top: 5px;color:#4B0082;">{{daily[0].uvIndex}}级</view>
						<text class="p1" style="font-size: 11px;">紫外线</text>
					</view>		
					<view class="grid-item-box " style="flex:0.45;">
						<image mode="widthFix" style="width: 23px;height: 23px;margin-top: 2px;" src="../../static/icon/风力.svg"></image>
						<view style="margin-top: 5px;color:#4B0082;">{{now.windScale}}级</view>
						<text class="p1" style="font-size: 11px;">风力</text>
					</view>
					<view class="grid-item-box"  style="flex:0.45;">
						<image mode="widthFix" style="width: 23px;height: 23px;margin-top: 2px;" src="../../static/icon/风向.svg"></image>
						<view style="margin-top: 5px;color:#4B0082;">{{now.windDir}}</view>
						<text class="p1" style="font-size: 11px;">风向</text>
					</view>				
					<view class="grid-item-box"  style="flex:0.45;">
						<image mode="widthFix" style="width: 23px;height: 23px;margin-top: 2px;" src="../../static/icon/气压.svg"></image>
						<view style="margin-top: 5px;color:#4B0082;">{{now.pressure}}百帕</view>
						<text class="p1" style="font-size: 11px;">气压</text>
					</view>				
					<view class="grid-item-box"  style="flex:0.45;">
						<image mode="widthFix" style="width: 23px;height: 23px;margin-top: 2px;" src="../../static/icon/能见度.svg"></image>
						<view style="margin-top: 5px;color:#4B0082;">{{now.vis}}公里</view>
						<text class="p1" style="font-size: 11px;">能见度</text>
					</view>
				</view>			
				<view class="nav-bar-item" style="display: flex;margin-top: 5px;">
						<view class="grid-item-box" style="flex:0.4;">
							<image mode="widthFix" style="width: 23px;height: 23px;margin-top: 2px;" src="../../static/icon/风力.svg"></image>
							<view style="margin-top: 5px;color:#4B0082;">{{now.windSpeed}}</view>
							<text class="p1" style="font-size: 11px;">风速</text>
						</view>					
						<view class="grid-item-box" style="flex:0.45;">
							<image mode="widthFix" style="width: 23px;height: 23px;margin-top: 2px;" src="../../static/icon/露点温度.svg"></image>
							<view style="margin-top: 5px;color:#4B0082;">{{now.dew}}℃</view>
							<text class="p1" style="font-size: 11px;">露点温度</text>
						</view>				
						<view class="grid-item-box" style="flex:0.45;">
							<image mode="widthFix" style="width: 23px;height: 23px;margin-top: 2px;" src="../../static/icon/降水量.svg"></image>
							<view style="margin-top: 5px;color:#4B0082;">{{daily[0].precip}}mm</view>
							<text class="p1" style="font-size: 11px;">降水量</text>
						</view>					
						<view class="grid-item-box" style="flex:0.45;">
							<image mode="widthFix" style="width: 23px;height: 23px;margin-top: 2px;" :src="`/static/icons/${daily[0].moonPhaseIcon}.svg`"></image>
							<view style="margin-top: 5px;color:#4B0082;">{{daily[0].moonPhase}}</view>
							<text class="p1" style="font-size: 11px;">月相</text>
						</view>							
					<view class="grid-item-box" style="flex:0.45;">
							<image mode="widthFix" style="width: 23px;height: 23px;margin-top: 2px;" src="../../static/icon/日出.svg"></image>
							<view style="margin-top: 5px;color:#4B0082;">{{daily[0].sunrise}}</view>
							<text class="p1" style="font-size: 11px;">日出</text>
						</view>					
						<view class="grid-item-box" style="flex:0.45;">
							<image mode="widthFix" style="width: 23px;height: 23px;margin-top: 2px;" src="../../static/icon/日落.svg"></image>
							<view style="margin-top: 5px;color:#4B0082;">{{daily[0].sunset}}</view>
							<text class="p1" style="font-size: 11px;">日落</text>
						</view>					
						<view class="grid-item-box" style="flex:0.45;">
							<image mode="widthFix" style="width: 25px;height: 25px;margin-top: 2px;" src="../../static/icon/月升.svg"></image>
							<view style="margin-top: 3px;color:#4B0082;">{{daily[0].moonrise}}</view>
							<text class="p1" style="font-size: 11px;">月升</text>
						</view>					
						<view class="grid-item-box" style="flex:0.45;">
							<image mode="widthFix" style="width: 25px;height: 25px;margin-top: 2px;" src="../../static/icon/月落.svg"></image>
							<view style="margin-top: 3px;color:#4B0082;">{{daily[0].moonset}}</view>
							<text class="p1" style="font-size: 11px;">月落</text>
						</view>
					</view>								
				  </view>
		</view>
		<!--生活指数-->
		<view class="card-modular" style="padding-bottom: 50px;">
			<view style="display: flex;">
			<view class="title">生活指数</view>
			<image src="../../static/icon/生活指数-k.svg" style="width: 20px;height: 20px;margin-left: 5px;"></image>
			</view>
			<view class="card-wrap"style="background-color:#F5F5F5;opacity: 0.9;">
				<button @click="life">查看详情 =></button>
					<view class="nav-bar-item" style="display: flex;">
						
							<view class="grid-item-box" style="flex:0.4;">
								<image mode="widthFix" style="width: 23px;height: 23px;margin-top: 3px;" src="../../static/icon/钓鱼.svg"></image>
								<view style="margin-top: 5px;color:#4B0082;">{{indices[3].category}}</view>
								<text class="p1" style="font-size: 11px;">钓鱼</text>
							</view>
						<view class="grid-item-box" style="flex:0.45;">
							<image mode="widthFix" style="width: 23px;height: 23px;margin-top: 3px;" src="../../static/icon/洗车.svg"></image>
							<view style="margin-top: 5px;color:#4B0082;">{{indices[1].category}}</view>
							<text class="p1" style="font-size: 11px;">洗车</text>
						</view>
						<view class="grid-item-box" style="flex:0.45;">
							<image mode="widthFix" style="width: 23px;height: 23px;margin-top: 3px;" src="../../static/icon/穿衣.svg"></image>
							<view style="margin-top: 5px;color:#4B0082;">{{indices[2].category}}</view>
							<text class="p1" style="font-size: 11px;">穿衣</text>
						</view>
						<view class="grid-item-box" style="flex:0.45;">
							<image mode="widthFix" style="width: 23px;height: 23px;margin-top: 3px;" src="../../static/icon/防晒霜.svg"></image>
							<view style="margin-top: 5px;color:#4B0082;">{{indices[15].category}}</view>
							<text class="p1" style="font-size: 11px;">防晒</text>
						</view>
						<view class="grid-item-box" style="flex:0.45;">
							<image mode="widthFix" style="width: 23px;height: 23px;margin-top: 3px;" src="../../static/icon/感冒.svg"></image>
							<view style="margin-top: 5px;color:#4B0082;">{{indices[8].category}}</view>
							<text class="p1" style="font-size: 11px;">感冒</text>
						</view>
						<view class="grid-item-box" style="flex:0.45;">
							<image mode="widthFix" style="width: 23px;height: 23px;margin-top: 3px;" src="../../static/icon/交通.svg"></image>
							<view style="margin-top: 5px;color:#4B0082;">{{indices[14].category}}</view>
							<text class="p1" style="font-size: 11px;">交通</text>
						</view>
						<view class="grid-item-box" style="flex:0.45;">
							<image mode="widthFix" style="width: 23px;height: 23px;margin-top: 3px;" src="../../static/icon/化妆品.svg"></image>
							<view style="margin-top: 5px;color:#4B0082;">{{indices[12].category}}</view>
							<text class="p1" style="font-size: 11px;">化妆</text>
						</view>
						<view class="grid-item-box" style="flex:0.45;">
							<image mode="widthFix" style="width: 23px;height: 23px;margin-top: 3px;" src="../../static/icon/three-d-glasses-filled.svg"></image>
							<view style="margin-top: 5px;color:#4B0082;">{{indices[11].category}}</view>
							<text class="p1" style="font-size: 11px;">太阳镜</text>
						</view>
						
					</view>
					<view class="nav-bar-item" style="display: flex;margin-top: 2px;">
						
							<view class="grid-item-box"style="flex:0.4;">
								<image mode="widthFix" style="width: 23px;height: 23px;margin-top: 3px;" src="../../static/icon/运动.svg"></image>
								<view style="margin-top: 5px;color:#4B0082;">{{indices[0].category}}</view>
								<text class="p1" style="font-size: 11px;">运动</text>
							</view>
						<view class="grid-item-box" style="flex:0.45;">
							<image mode="widthFix" style="width: 23px;height: 23px;margin-top: 3px;" src="../../static/icon/旅游.svg"></image>
							<view style="margin-top: 5px;color:#4B0082;">{{indices[5].category}}</view>
							<text class="p1" style="font-size: 11px;">旅游</text>
						</view>
						<view class="grid-item-box" style="flex:0.45;">
							<image mode="widthFix" style="width: 23px;height: 23px;margin-top: 3px;" src="../../static/icon/紫外线1.svg"></image>
							<view style="margin-top: 5px;color:#4B0082;">{{indices[4].category}}</view>
							<text class="p1" style="font-size: 11px;">紫外线</text>
						</view>
						<view class="grid-item-box" style="flex:0.45;">
							<image mode="widthFix" style="width: 23px;height: 23px;margin-top: 3px;" src="../../static/icon/空气污染.svg"></image>
							<view style="margin-top: 5px;color:#4B0082;">{{indices[9].category}}</view>
							<text class="p1" style="font-size: 11px;">空气污染</text>
						</view>
						<view class="grid-item-box" style="flex:0.45;">
							<image mode="widthFix" style="width: 23px;height: 23px;margin-top: 3px;" src="../../static/icon/过敏.svg"></image>
							<view style="margin-top: 5px;color:#4B0082;">{{indices[6].category}}</view>
							<text class="p1" style="font-size: 11px;">过敏</text>
						</view>
						
						<view class="grid-item-box" style="flex:0.45;">
							<image mode="widthFix" style="width: 23px;height: 23px;margin-top: 3px;" src="../../static/icon/晾晒.svg"></image>
							<view style="margin-top: 5px;color:#4B0082;">{{indices[13].category}}</view>
							<text class="p1" style="font-size: 11px;">晾晒</text>
						</view>
						<view class="grid-item-box" style="flex:0.45;">
							<image mode="widthFix" style="width: 23px;height: 23px;margin-top: 3px;" src="../../static/icon/舒适度.svg"></image>
							<view style="margin-top: 5px;color:#4B0082;">{{indices[7].category}}</view>
							<text class="p1" style="font-size: 11px;">舒适度</text>
						</view>
						<view class="grid-item-box" style="flex:0.45;">
							<image mode="widthFix" style="width: 23px;height: 23px;margin-top: 3px;" src="../../static/icon/空调开启.svg"></image>
							<view style="margin-top: 5px;color:#4B0082;">{{indices[10].category}}</view>
							<text class="p1" style="font-size: 11px;">空调开启</text>
						</view>
					</view>
				
			</view>
		</view>
		<view>
			
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog :type="msgType"  confirmText="收到" title="极端天气预警" @close="close" @confirm="confirm">
				<view>
					<text>{{warn.typeName}}{{warn.level}}预警</text>
					<view>{{warn.text}}</view>
				</view>
				</uni-popup-dialog>
			</uni-popup>
		</view>
	
		</view>
	
</template>
 
<script>
const APIKEY = 'baf7fbe99ad449c893e017c5b27617ef' ;// 填入你申请的KEY


export default {
	
	data() {
		return {
			user: uni.getStorageSync('weather2024'),
			currenttime:'',
			location: '',
			type:'',
			now: '',
			hourly: '',
			daily: '',
			City: '',
			County: '',
		tempMax:'',
		tempMin:'',
		warn:'',
		indices:[],
		indexes:'',
		notices:[],
		hasShownPopup:false,
		};
	},
	created(){
	wx.showShareMenu({
		withShareTicket:true,
		menus:['shareAppMessage','shareTimeline']
	});	
	 this.loadNotice();
	},
	onLoad: function (options) {
			setTimeout(function () {
				console.log('start pulldown');
			}, 1000);
			uni.startPullDownRefresh();
		},
		onPullDownRefresh() {
			console.log('refresh');
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		},
	onShareAppMessage(res){
		return{
			title: this.title,
			imageUrl:this.thumb
		}
	},
	onShareTimeline(res){
		return{
			title: this.title,
			imageUrl:this.thumb
		}
	},
	onShow(){
	this.checkWarning()	
	},
	onLoad() {
		this.getLocation();
		const token=uni.getStorageSync('weather2024').token
		if(!token){
			uni.redirectTo({
				url:'/pages/login/login'
			})
		}
		},
		
	methods: {
		loadNotice() {
		  this.$request.get('/notice/selectUserData').then(res => {
		    this.notices = res.data
			
			
		  })
		},
		open(){
			this.$refs.alertDialog.open()
		},
		close(){
			this.$refs.alertDialog.close()
		},
		checkWarning(){
			if(this.warn && !this.hasShownPopup){
				this.open();
			}
		},
		confirm() {
				this.$refs.alertDialog.close();
				this.hasShownPopup = true;
		
		},
		getMore(){
			uni.navigateTo({
				url:'/pages/user/news'
			})
		},
		life(){
			uni.navigateTo({
				url:'/pages/index/life'
			})
		},
	test(){
		uni.navigateTo({
			url:'/pages/index/test'
		})
	},
	air(){
		uni.navigateTo({
			url:'/pages/index/airquility'
		})
	},
	
	warning(){
				uni.navigateTo({
					url:'/pages/index/warn',
				})
			},
			
		//选择定位
		selectLocation() {
			var that = this;
			uni.chooseLocation({
				success(res) {
					that.location = res.longitude + ',' + res.latitude;
					that.getWeather();
					that.getWeatherIndices();
					that.getCityByLoaction();
					that.getWeatherWarning();
					that.getIndexes();
				},
				fail() {
					uni.getLocation({
						type: 'gcj02',
						fail() {
							uni.showModal({
								title: '获取地图位置失败',
								content:
									'为了给您提供准确的天气预报服务,请在设置中授权【位置信息】',
								success(mRes) {
									if (mRes.confirm) {
										uni.openSetting({
											success: function (data) {
												if (
													data.authSetting['scope.userLocation'] === true
												) {
													that.selectLocation();
												} else {
													uni.showToast({
														title: '授权失败',
														icon: 'none',
														duration: 1000
													});
												}
											},
											fail(err) {
												console.log(err);
												uni.showToast({
													title: '唤起设置页失败，请手动打开',
													icon: 'none',
													duration: 1000
												});
											}
										});
									}
								}
							});
						}
					});
				}
			});
		},	
		/**
		 * 获取定位
		 */
		getLocation() {
			var that = this;
			uni.getLocation({
				type: 'gcj02',
				success(res) {
					that.location = res.longitude + ',' + res.latitude;
					that.latitude=res.latitude;
					that.longitude=res.longitude;
					that.getWeather();
					that.getCityByLoaction();
					that.getWeatherIndices();
					that.getWeatherWarning();
					that.getIndexes();
				},
				fail(err) {
					uni.showModal({
						title: '获取定位信息失败',
						content: '为了给您提供准确的天气预报服务,请在设置中授权【位置信息】',
						success(mRes) {
							if (mRes.confirm) {
								uni.openSetting({
									success: function (data) {
										if (data.authSetting['scope.userLocation'] === true) {
											uni.showToast({
												title: '授权成功',
												icon: 'success',
												duration: 1000
											});
											that.getLocation();
										} else {
											uni.showToast({
												title: '授权失败',
												icon: 'none',
												duration: 1000
											});
											that.location = '地理位置';
											that.getWeather();
											that.getCityByLoaction();
										}
									},
									fail(err) {
										console.log(err);
										uni.showToast({
											title: '唤起设置页失败，请手动打开',
											icon: 'none',
											duration: 1000
										});
										that.location = '地理位置';
										that.getWeather();
										that.getCityByLoaction();
									}
								});
							} else if (mRes.cancel) {
								that.location = '地理位置';
								that.getWeather();
								that.getCityByLoaction();
							}
						}
					});
				}
			});
		},
		/**
		 * 根据坐标获取城市信息
		 */
		getCityByLoaction() {
			var that = this;
			uni.request({
				url:
					'https://geoapi.qweather.com/v2/city/lookup?key=' +
					APIKEY +
					'&location=' +
					that.location,
				success(result) {
					var res = result.data;
					if (res.code == '200') {
						var data = res.location[0];
						that.City = data.adm2;
						that.County = data.name;
					} else {
						uni.showToast({
							title: '获取城市信息失败',
							icon: 'none'
						});
					}
				}
			});
		},
		/**
		 * 获取天气
		 */
		getWeather() {
			var that = this;
			uni.showLoading({
				title: '加载中'
			});
			uni.request({
				url:
					'https://devapi.qweather.com/v7/weather/now?key=' +
					APIKEY +
					'&location=' +
					that.location,
				success(result) {
					var res = result.data;
					that.now = res.now;
				}
			});
			uni.request({
				url:
					'https://devapi.qweather.com/v7/weather/24h?key=' +
					APIKEY +
					'&location=' +
					that.location,
				success(result) {
					var res = result.data;
					res.hourly.forEach(function (item) {
						item.time = that.formatTime(new Date(item.fxTime)).hourly;
					});
					that.hourly = res.hourly;
				}
			});
			uni.request({
				url:
					'https://devapi.qweather.com/v7/weather/7d?key=' +
					APIKEY +
					'&location=' +
					that.location,
				success(result) {
					var res = result.data;
					res.daily.forEach(function (item) {
						item.date = that.formatTime(new Date(item.fxDate)).daily;
						item.dateToString = that.formatTime(new Date(item.fxDate)).dailyToString;
					});
					that.tempMax=res.daily[0].tempMax;
					that.tempMin=res.daily[0].tempMin;
					
					that.daily = res.daily;
					uni.hideLoading();
				}
			});
		},
		//生活指数
		getWeatherIndices(){
			var that = this;
			uni.request({
				url:
					'https://devapi.qweather.com/v7/indices/1d?key=' +
					APIKEY + 
					'&location=' +that.location+'&type=0',
					success(result){
						
						var res=result.data;
						
						that.indices=res.daily;
						uni.hideLoading();
					}
			});
		},
		//天气预警
		getWeatherWarning(){
			var that = this;
			uni.request({
				url:
					'https://devapi.qweather.com/v7/warning/now?key=' +
					APIKEY +
					'&location=' +that.location,
					success(result){
						
						var res=result.data;
						that.warn=res.warning[0];				
					}
			});
			
		},
		//空气质量
		getIndexes(){
			var that = this;
			uni.request({
				url:
					'https://devapi.qweather.com/airquality/v1/current/'+that.latitude+'/'+that.longitude+'/?key='+APIKEY ,
					success(result){
						console.log(result)
						var res=result.data;
									that.indexes=res.indexes[0];
					}
			});
		},
		// 格式时间
		formatTime(date) {
			const year = date.getFullYear();
			const month = date.getMonth() + 1;
			const day = date.getDate();
			const hour = date.getHours();
			const minute = date.getMinutes();
			const second = date.getSeconds();
			const weekArray = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
			const isToday = date.setHours(0, 0, 0, 0) == new Date().setHours(0, 0, 0, 0);
			return {
				hourly: [hour, minute].map(this.formatNumber).join(':'),
				daily: [month, day].map(this.formatNumber).join('-'),
				dailyToString: isToday ? '今天' : weekArray[date.getDay()]
			};
		},
		// 补零
		formatNumber(n) {
			n = n.toString();
			return n[1] ? n : '0' + n;
		}
	}
};
</script>
 
<style lang="scss">
 .big{
 	 background-image: url(https://img1.baidu.com/it/u=351953030,3437381076&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500);
 	  
 }

/* 页面样式 */
.header-modular {
	height: 550rpx;
	background-image: url(https://img1.baidu.com/it/u=351953030,3437381076&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500);
	 background-size: cover;
	//background-color: #64c8fa;
//	background: linear-gradient(to bottom, #56ccf2, #2f80ed);
	position: relative;
	padding: 30rpx;
	opacity: 0.8;
}
.header-modular .bg-wave {
	width: 100vw;
	position: absolute;
	bottom: -2px;
	left: 0;
	right: 0;
	height: 120rpx;
	mix-blend-mode: screen;
}
.header-modular .location-wrap {
	color: #ffffff;
	font-weight: bold;
	font-size: 36rpx;
} 
.header-modular .location-wrap .icon {
	width: 40rpx;
	height: 40rpx;
	margin-right: 8rpx;
	
} 
.header-modular .icon-weather {
	width: 200rpx;
	height: 200rpx;
	
}
.header-modular .tips:nth-child(3) {
	text-align: right;
}
 
.header-modular .tips:nth-child(2) {
	text-align: center;
}
.card-modular {
	padding: 0 30rpx;
	margin-top: 30rpx;
} 
.card-modular > .title {
	font-size: 40rpx;
	font-weight: bolder;
	position: relative;
	margin-left: 14rpx;
	margin-bottom: 16rpx;
	font-family: "Times New Roman", Times, serif;
} 
.card-modular > .title::before {
	content: '';
	position: absolute;
	left: -14rpx;
	top: 10rpx;
	bottom: 10rpx;
	width: 8rpx;
	border-radius: 10rpx;
	background-color: #2f80ed;		
}
.card-modular .card-wrap {
	width: 690rpx;
	border-radius: 18rpx;
	background-color: #ffffff;
	box-shadow: 0 0 20rpx 0 rgba(0, 0, 0, 0.2);
	overflow-x: auto;
	white-space: nowrap;
	font-family: "Times New Roman", Times, serif;
	font-weight: bolder;
} 
.card-modular .card-wrap .item {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	font-size: 28rpx;
	padding: 18rpx 0;
	
}
.card-modular .card-wrap .item.hourly {
	width: 138rpx;
}
.card-modular .card-wrap .item.daily {
	width: 172.5rpx;
}
.card-modular .card-wrap .item .icon {
	width: 60rpx;
	height: 60rpx;
	margin: 64rpx 0;
}
 
.card-modular .card-wrap .item .text-gray {
	color: gray;
	
 }
.card-modular .card-wrap .item .text-primary {
	color: #0000CD;
	font-size: 15px;
}
.p1{
	font-family: "Times New Roman", Times, serif;
	font-weight: bolder;
}
.title{
	 
		font-family: "Brush Script MT", "Lucida Handwriting", Cursive;
		font-weight: bolder;
		color: white;
		font-size: 18px;
			
	}
.title2{
		 
		font-family: "Brush Script MT", "Lucida Handwriting", Cursive;
		font-weight: bolder;
		color: white;
		font-size: 22px;
		display: flex;
		justify-content: center;
		align-items: center;
		}
.title4{
			 
		font-family: "Times New Roman", Times, serif;
		font-weight: bolder;
		color: white;
		font-size: 22px;
		display: flex;
		justify-content: center;
		align-items: center;
		}
.title1{
			font-family: "Times New Roman", Times, serif;
			font-weight: bolder;
			color: white;
			font-size: 15px;
			
      }
 .title3{
	  	 
	  			font-family:  "Times New Roman", Times, serif;
	  			font-weight: bolder;
	  			color: white;
	  			font-size: 35px;
	  			display: flex;
	  			justify-content: center;
	  			align-items: center;
				margin-top: 10px;
	  	}
.grid-item-box{
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}
.p1{
				font-family: "Brush Script MT", "Lucida Handwriting", Cursive;
				font-weight: bolder;
				
			}
			scroll-view{
				white-space: nowrap;
			}
::-webkit-scrollbar{
				display: none;
				width: 0;
				height: 0;
				color: transparent;
			}
.nav-bar-wrap{
				display: flex;
				flex-flow: column wrap;
				height: 400rpx;
			}
.nav-bar-item{
				width: 1500rpx;
				display: flex;
				height: 170rpx;
				margin-top: 18rpx;
				position: relative;
			}
			
			
			
			
			
			
			
			
			
			
</style>